import _ from 'lodash'
import React, { Component, ReactNode } from 'react'
import { UdTable, BaseDetailPage, UdDetail, http, IBaseDetailPageState, IBaseDetailPageProps, IUdColumn } from '../../../lib'
import { Card, Input } from 'antd'

class RepairDetail extends BaseDetailPage<IRepairDetailProps, IRepairDetailState> {

  protected defaultQueryParams = {
    page: 1,
    size: 10
  }

  private columns: IUdColumn[] = [
    {
      title: '序号',
      dataIndex: 'index',
      render: (text, model, index) => {
        return (<span>{index + 1}</span>)
      }
    },
    ['原二维码编码ID', 'oldBottleCode'],
    ['新二维码ID', 'currentBottleCode'],
    ['商品ID', 'sysProductCode'],
    ['商品名称', 'sysProductName']
  ]

  constructor(props: IRepairDetailProps) {
    super(props)
    this.state = {
      title: '查修页面',
      queryAction: () => {
        return http.post('/fix/detail', {
          fixNo: this.props.match.params.id,
          page: this.queryParams.page,
          size: this.queryParams.size
        })
      }
    }
  }

  render() {
    const tableData = _.get(this.state.dataSource, 'data.content')
    const pagination = {
      current: this.queryParams.page,
      pageSize: this.queryParams.size,
      showTotal: (total: number, range: [number, number]) => `共 ${total} 项, 当前 ${range[0]}-${range[1]}`,
      showQuickJumper: true,
      showSizeChanger: true,
      pageSizeOptions: ['10', '20', '40', '60', '100', '150', '200'],
      onChange: this.onPageChange,
      onShowSizeChange: this.onPageShowSizeChange
    }
    return super.render({
      body: (
        <>
          <Card size="small" title="基本信息">
            <UdDetail dataSource={this.state.dataSource.basic} items={[
              ['申请单号', 'fixNo'],
              ['申请库存地址', 'currentStorageName'],
              ['数量', 'quantity'],
              ['申请货主', 'currentShipperName'],
              ['来源', 'source'],
              ['申请人ID', 'optId'],
              ['申请时间', 'optTime'],
              ['申请人名称', 'optName'],
              ['申请原因', 'cause', undefined, { col: { span: 24 } }],
            ]} />
          </Card>
          <Card size="small" title="审核信息">
            <UdDetail dataSource={this.state.dataSource.audit} items={[
              ['审核人ID', 'auditId'],
              ['审核人名称', 'auditor'],
              ['审核状态', 'auditStatus'],
              ['审核时间', 'auditTime'],
              { title: '驳回原因', dataIndex: 'rejectReason' }
            ]} col={{ span: 24 }} />
          </Card>

          <UdTable columns={this.columns} dataSource={tableData} pagination={pagination} />

        </>
      )
    })
  }

  protected queryParamsChanged = () => {
    this.query()
  }

  protected onPageChange = (page: number, pageSize?: number) => {
    let obj: any = { page: page }
    if (pageSize) {
      obj.size = pageSize
    }
    this.pushQueryParams(obj)
  }

  protected onPageShowSizeChange = (page: number, pageSize: number) => {
    this.onPageChange(1, pageSize)
  }

}

interface IRepairDetailProps extends IBaseDetailPageProps<{
  id: string
}> {

}

interface IRepairDetailState extends IBaseDetailPageState {

}

export default RepairDetail
